<template>
  <div id="centerArea">

    <!-- <div class="product_box">
      <div>
        <div>
          <div class="product_tit">立即试用云产品</div>
          <div class="product_dec">TRY CLOUD</div>
          <div class="product_dec">PRODUCTS</div>
          <div class="product_dec">IMMEDIATELY</div>
        </div>
        <div>
          <div class="product_tit">API接入</div>
          <div class="product_dec">API Access</div>
        </div>
        <div>
          <div class="product_tit">本地部署方案</div>
          <div class="product_dec">LOCAL</div>
          <div class="product_dec">DEPLOYMENT</div>
          <div class="product_dec">OPTIONS</div>
        </div>
      </div>
    </div> -->
    <div class="solution">
      <div>
        <div class="solution_title">解决方案</div>
        <div class="solution_dev">智能财务欺诈和风险分析产品</div>

        <div class="solution_select_box">
          <div>
            <div>
              <div class="solution_select_icon cai1"></div>
              <div class="solution_select_dev">财报风控</div>
              <div class="solution_select_p">结合财务专家规则和机器学习，洞察财报背后真实的企业运营状态</div>
           
            </div>
          </div>
          <div>
            <div>
              <div class="solution_select_icon cai2"></div>
              <div class="solution_select_dev">智能审计</div>
               <div class="solution_select_p">通过数字化监管，实现被动式监管向主动式监管方式转变</div>
            
            </div>
          </div>
          <div>
            <div>
              <div class="solution_select_icon cai3"></div>
              <div class="solution_select_dev">财务中台</div>
               <div class="solution_select_p">构建以财务数据为业务分析的服务中台，提升企业数字大运营水平化</div>
          
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "centerArea",
  dec: "中间区域",
  data () {
    return {
      mouseIndex: 1,
      timer: null
    }
  },
  mounted() {
    // this.initRound()
  },
  methods: {
    center_dev_mouserenter (index) {
      this.mouseIndex = index
      
    },
    initRound () {
      if(this.mouseIndex  == 4){
        this.mouseIndex  = 1
      }else{
        this.mouseIndex  = this.mouseIndex +1
      }
      this.timer = setTimeout(this.initRound.bind(this), 2e3);

    },
    jumpSolution (id) {

      location.href = `/solution.html?id=${id}`
      
    }
  },
};
</script>

<style lang="less">


@import url("../../../../main.less");

.opcity-enter,.opcity-leave-to{
            opacity: 0;
        }
        .opcity-enter-to,.opcity-leave{
            opacity: 1;
        }
        .opcity-enter-active,.opcity-leave-active{
            transition: all 2s;
        }
#centerArea {
  width: 100%;
  height: auto;
}
.box {
  width: 8rem;
  height: 8rem;
  background: #fff;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.box div {
  background: paleturquoise;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
}

.son1 {
  animation: radarAnimation 4s infinite linear 0s;
}

.son2 {
  animation: radarAnimation 4s infinite linear 1s;
}

.son3 {
  animation: radarAnimation 4s infinite linear 2s;
}

@keyframes radarAnimation {
  0% {
    width: 0rem;
    height: 0rem;
    background: rgb(229, 243, 251, 1);
    z-index: 3;
    margin-left: -0rem;
    margin-top: -0rem;
  }

  10% {
    width: 0.8rem;
    height: 0.8rem;
    background: rgba(229, 243, 251, 0.9);
    z-index: 3;
    margin-left: -0.4rem;
    margin-top: -0.4rem;
  }

  20% {
    width: 1.6rem;
    height: 1.6rem;
    background: rgba(229, 243, 251, 0.8);
    z-index: 2;
    margin-left: -0.8rem;
    margin-top: -0.8rem;
  }

  30% {
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(229, 243, 251, 0.7);
    z-index: 2;
    margin-left: -1.2rem;
    margin-top: -1.2rem;
  }

  40% {
    width: 3.2rem;
    height: 3.2rem;
    background: rgba(229, 243, 251, 0.6);
    z-index: 2;
    margin-left: -1.6rem;
    margin-top: -1.6rem;
  }

  50% {
    width: 4rem;
    height: 4rem;
    background: rgba(229, 243, 251, 0.5);
    z-index: 1;
    margin-left: -2rem;
    margin-top: -2rem;
  }

  60% {
    width: 4.8rem;
    height: 4.8rem;
    background: rgba(229, 243, 251, 0.4);
    z-index: 1;
    margin-left: -2.4rem;
    margin-top: -2.4rem;
  }

  70% {
    width: 5.6rem;
    height: 5.6rem;
    background: rgba(229, 243, 251, 0.3);
    z-index: 1;
    margin-left: -2.8rem;
    margin-top: -2.8rem;
  }

  80% {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(229, 243, 251, 0.2);
    z-index: 0;
    margin-left: -3.2rem;
    margin-top: -3.2rem;
  }

  90% {
    width: 7.2rem;
    height: 7.2rem;
    background: rgba(229, 243, 251, 0.1);
    z-index: 0;
    margin-left: -3.6rem;
    margin-top: -3.6rem;
  }

  100% {
    width: 8rem;
    height: 8rem;
    background: rgba(229, 243, 251, 0);
    z-index: 0;
    margin-left: -4rem;
    margin-top: -4rem;
  }
}

.center_bander {
  height: 8rem;
  width: 8rem;
  position: relative;
  z-index: 4;
  margin: 0 auto;
}
.center_bander .center_bar_box {
  width: 5.29rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  height: 0.32rem;
  z-index: 4;

  width: 4.95rem;
  height: 4.17rem;
}
.center_bander .center_bar_box1{
    background: url('/static/img/icon_1.png') no-repeat ;
    background-size: 100%;
}
.center_bander .center_bar_box2{
      background: url('/static/img/icon_2.png') no-repeat ;
       background-size: 100%;
}
.center_bander .center_bar_box3{
      background: url('/static/img/icon_3.png') no-repeat ;
       background-size: 100%;
}
.center_bander .center_bar_box4{
      background: url('/static/img/icon_4.png') no-repeat ;
       background-size: 100%;
}

.center_bander
  .center_bar_box
  .center_square_box
  .center_square:nth-child(3)
  div {
  position: absolute;
  width: 1.49rem;
  height: 1.74rem;
  background: #ee98a6;
  margin-left: -0.745rem;
  top: -2rem;
}
.center_bander
  .center_bar_box
  .center_square_box
  .center_square:nth-child(3)
  div:nth-child(2) {
  position: absolute;
  width: 2.63rem;
  height: 1.18rem;
  background: #ee98a6;
  margin-left: -1.315rem;
  top: 0.8rem;
}
.center_bander .center_bar_box .center_square_box .center_square div img {
  width: 100%;
  height: 100%;
  display: block;
}
.center_dev_box {
  width: 6.8rem;
  height: 3.33rem;

  position: absolute;
  top: 4.24rem;
  z-index: 5;
  left: 50%;
  margin-left: -3.4rem;
  font-size: 0.24rem;
}
.center_dev_box .center_dev {
  position: absolute;
  width: 3.3rem;
}
.center_dev_box .center_dev > div {
  color: #6a6b75;
  font-size: 0.26rem;
}
.center_dev_box .center_dev > div:nth-child(1) {
  color: #34353f;
  font-size: 0.28rem;
  margin-bottom: 0.01rem;
}

.center_dev_box .center_dev:nth-child(1) {
  bottom: 3.33rem;
  right: 6.8rem;
  text-align: right;
}
.center_dev_box .center_dev:nth-child(2) {
  bottom: 3.33rem;
  left: 6.8rem;
}
.center_dev_box .center_dev:nth-child(3) {
  top: 3.33rem;
  right: 6.8rem;
  text-align: right;
}
.center_dev_box .center_dev:nth-child(4) {
  top: 3.33rem;
  left: 6.8rem;
}
.center_dev_box .center_dev > .center_dev_icon_1or3 {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  
  right: -0.54rem;
  top: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 0.45rem;
  .bg{
    background-size: 75% !important;
    background-position: 48% !important;
  }
}
.center_dev_box .center_dev > .icon1 .bg{
  background: url('/static/img/yun2x.png') no-repeat 0%/75%;
  width: 100%;
  height: 100%;
}
.center_dev_box .center_dev > .icon2 .bg{
  width: 100%;
  height: 100%;
  background: url('/static/img/yun@2x.png') no-repeat 0%/75%;
}
.center_dev_box .center_dev > .icon3 .bg{
  width: 100%;
  height: 100%;
  background: url('/static/img/shuju_beifen1.png') no-repeat 0%/75%;
}
.center_dev_box .center_dev > .icon4 .bg{
   width: 100%;
  height: 100%;
  background: url('/static/img/tubiao-@2x.png') no-repeat 0/75%;
}
.center_dev_box .center_dev > .icon1.active, .center_dev_box .center_dev > .icon2.active, .center_dev_box .center_dev > .icon3.active, .center_dev_box .center_dev > .icon4.active{
  overflow: hidden;
 
  background: rgba(71,129,210,1) ;
  .bg{
    width: 100%;
    height: 100%;
   
     background-size: 75% !important;
    background-position: 48% !important;
  }
}
.center_dev_box .center_dev > .icon1.active{
  .bg{
    background:  url('/static/img/yunactive.png') no-repeat;
  }
}
.center_dev_box .center_dev > .icon2.active{
  .bg{
    background:  url('/static/img/yun_beifen.png') no-repeat;
  }
}
.center_dev_box .center_dev > .icon3.active{
  .bg{
    background:  url('/static/img/shuju_beifen3.png') no-repeat;
  }
}
.center_dev_box .center_dev > .icon4.active{
  .bg{
    background:  url('/static/img/tubiao_beifen.png') no-repeat;
  }
}
.center_dev_box .center_dev > .center_dev_icon_2or4 {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;

  left: -0.54rem;
  top: 0;
  text-align: center;
  line-height: 0.45rem;
  border-radius: 50%;
  .bg{
    background-size: 75% !important;
    background-position: 48% !important;
  }
}
.center_dev_box .center_dev > .active {
  color: rgba(71,129,210,1) !important;
}

.product_box {
  height: 7.37rem;
  background: rgba(249, 249, 249, 1);
}
.product_box > div {
  width: 12rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product_box > div > div {
  width: 3.8rem;
  height: 4.79rem;
  background: linear-gradient(
    180deg,
    rgba(2, 147, 247, 1) 0%,
    rgba(99, 223, 255, 1) 100%
  );
  border-radius: 0.16rem;
  padding-left: 0.38rem;
  padding-top: 0.36rem;
  box-sizing: border-box;
}
.product_box > div > div .product_tit {
  font-size: 0.3rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 0.16rem;
}
.product_box > div > div .product_dec {
  margin-bottom: 0.16rem;

  font-size: 0.17rem;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: rgba(255, 255, 255, 1);

  letter-spacing: 4px;
}
.solution {
  min-height: 6.92rem;
  background: url('/static/img/logobg.jpg') no-repeat;
  background-size: 100% 100%;
  padding: 0.64rem 0;
}
.solution > div {
  width: 12rem;
  height: 100%;
  margin: 0 auto;
  padding-top: 1px;
}
.solution > div .solution_title {

  font-size: 0.41rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.solution > div .solution_dev {
  text-align: center;
  font-size: 0.26rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.1rem;
}

.solution > div .solution_select_box {
  
  min-height: 3.78rem;
  margin-top: 0.64rem;
  width: 100%;
  background: #fff;
  display: flex;
}
.solution > div .solution_select_box > div {
  width: 4rem;
  padding: 0.34rem 0;
  height: 100%;
}
.solution > div .solution_select_box > div > div {
  width: 4rem;
  height: auto;
  border-left: 1px solid #ccc;
}
.solution > div .solution_select_box > div .solution_select_dev {
  font-size: 0.3rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 53, 63, 1);
  width: 100%;
  text-align: center;
  margin: 0.18rem auto;
}
.solution > div .solution_select_box > div .solution_select_p{
  width:2.69rem;
  font-size: 0.24rem;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(51,51,51,1);
  text-align: center;
  margin: 0 auto;
}
.solution > div .solution_select_box > div .solution_select_check{
  width:1.32rem;
  height:0.45rem;
  border-radius:0.06rem;
  border:0.01rem solid rgba(106,107,117,1);
  line-height: 0.45rem;
  text-align: center;
  margin: 0 auto;
  font-size:0.2rem;
  margin-top: 0.35rem;
  cursor: pointer;
}
.solution > div .solution_select_box > div .solution_select_icon {
  width: 1.39rem;
  height: 1.26rem;

  margin: 0 auto;
  position: relative;

  
}
.solution > div .solution_select_box > div .cai1{
  background: url('/static/img/cai1.png') no-repeat;
  background-size: 100%;
}
.solution > div .solution_select_box > div .cai2{
    background: url('/static/img/cai2.png') no-repeat;
  background-size: 100%;
  
}
.solution > div .solution_select_box > div .cai3{
    background: url('/static/img/cai3.png') no-repeat;
  background-size: 100%;
}


</style>